const vm = new Vue({
    el: "#app",
    data: {
        loginInfo: '',
        loginPass: '',
        loading: false,  // 添加加载状态
        errorMessage: '', // 添加错误消息状态
        userName: "",
        userEmail: "",
        userPhone: "",
        userPass: "",
        Confirmpassword: ""
    },
    methods: {
        login() {
            if (!this.loginInfo || !this.loginPass) {
                showMessage('请输入用户名/手机号/邮箱和密码', 'danger');
                return;
            }

            this.loading = true;  // 显示加载状态

            $.ajax("http://localhost:8080/postgraduateProject/login.do", {
                type: "post",
                data: {
                    loginInfo: this.loginInfo,
                    loginPass: this.loginPass
                },
                dataType: "json",
                success: (response) => {
                    if (response.success) {
                        // 登录成功
                        showMessage(response.message);

                        // 获取用户ID并重定向
                        const userId = response.user.userId;
                        console.log(`用户ID: ${userId}`);
                        console.log(`登录类型: ${response.loginType}`);

                        // 存储用户信息到本地存储
                        localStorage.setItem('userId', userId);
                        localStorage.setItem('username', response.user.userName);

                        // 跳转到主页
                        setTimeout(() => {
                            window.location.href = `index.html?userId=${userId}`;
                        }, 1000);
                    } else {
                        const errorCode = response.errorCode;
                        switch (errorCode) {
                            case 1001:
                                showMessage(response.message, "danger");
                                break;
                            case 1002:
                                showMessage(response.message, "danger");
                                break;
                        }
                    }
                }
            });
        },
        reg() {
            $.ajax("http://localhost:8080/postgraduateProject/reg.do", {
                type: "post",
                data: {
                    userName: this.userName,
                    userEmail: this.userEmail,
                    userPhone: this.userPhone,
                    userPass: this.userPass,
                },
                dataType: "json",
                success: (response) => {
                    if (response == 1) {
                        showMessage("注册成功", "success");
                        this.userName = '';
                        this.userEmail = '';
                        this.userPhone = '';
                        this.userPass = '';
                        this.Confirmpassword = "";
                        setTimeout(() => {
                            showLogin();
                        }, 1500);
                    } else {
                        showMessage("注册失败", "danger");
                    }
                }
            });
        }
    }
});
// 初始化粒子效果
document.addEventListener('DOMContentLoaded', function () {
    particlesJS('particles-js', {
        particles: {
            number: { value: 80, density: { enable: true, value_area: 800 } },
            color: { value: "#6c5ce7" },
            shape: { type: "circle" },
            opacity: { value: 0.5, random: true },
            size: { value: 3, random: true },
            line_linked: { enable: true, distance: 150, color: "#a29bfe", opacity: 0.4, width: 1 },
            move: { enable: true, speed: 2, direction: "none", random: true, straight: false, out_mode: "out" }
        },
        interactivity: {
            detect_on: "canvas",
            events: {
                onhover: { enable: true, mode: "repulse" },
                onclick: { enable: true, mode: "push" }
            }
        }
    });

    // 检查本地存储中的记住密码
    checkRememberMe();
});

// 显示提示信息的函数
function showMessage(message, type = 'success') {
    const messageBox = document.getElementById('message-box');

    // 根据类型设置不同的样式
    if (type === 'danger') {
        messageBox.className = 'alert alert-danger animate-fade-in';
    } else {
        messageBox.className = 'alert alert-success animate-fade-in';
    }

    messageBox.textContent = message;
    messageBox.style.display = 'block';

    // 添加动画效果
    messageBox.style.opacity = '0';
    setTimeout(() => {
        messageBox.style.opacity = '1';
        messageBox.style.transition = 'opacity 0.3s ease-in-out';
    }, 10);

    // 3秒后消失
    setTimeout(() => {
        messageBox.style.opacity = '0';
        setTimeout(() => {
            messageBox.style.display = 'none';
        }, 300);
    }, 3000);
}

// 添加动画样式
document.head.insertAdjacentHTML('beforeend', `
    <style>
        .animate-fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
`);

// 表单切换函数
function showRegister() {
    document.getElementById('login-container').classList.add('d-none');
    document.getElementById('register-container').classList.remove('d-none');
}

function showLogin() {
    document.getElementById('register-container').classList.add('d-none');
    document.getElementById('login-container').classList.remove('d-none');
}

// 检查记住密码
function checkRememberMe() {
    const rememberMe = localStorage.getItem('rememberMe') === 'true';
    if (rememberMe) {
        document.getElementById('remember-me').checked = true;
        document.getElementById('login-username').value = localStorage.getItem('username') || '';
        document.getElementById('login-password').value = localStorage.getItem('password') || '';
    }
}
// 注册表单验证
document.getElementById('register-form').addEventListener('submit', function (e) {
    e.preventDefault();

    const username = document.getElementById('register-username').value;
    const email = document.getElementById('register-email').value;
    const phone = document.getElementById('register-phone').value;
    const password = document.getElementById('register-password').value;
    const confirmPassword = document.getElementById('register-confirm-password').value;

    // 用户名验证
    if (username.length < 4 || username.length > 16) {
        document.getElementById('register-username').classList.add('is-invalid');
        showMessage('用户名应为4-16位字符', 'danger');
        return;
    } else {
        document.getElementById('register-username').classList.remove('is-invalid');
    }

    // 邮箱验证
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
        document.getElementById('register-email').classList.add('is-invalid');
        showMessage('请输入有效的邮箱地址', 'danger');
        return;
    } else {
        document.getElementById('register-email').classList.remove('is-invalid');
    }

    // 手机号验证
    const phoneRegex = /^1[3-9]\d{9}$/;
    if (!phoneRegex.test(phone)) {
        document.getElementById('register-phone').classList.add('is-invalid');
        showMessage('请输入有效的手机号', 'danger');
        return;
    } else {
        document.getElementById('register-phone').classList.remove('is-invalid');
    }

    // 密码验证
    if (password.length < 6) {
        document.getElementById('register-password').classList.add('is-invalid');
        showMessage('密码至少6位', 'danger');
        return;
    } else {
        document.getElementById('register-password').classList.remove('is-invalid');
    }

    // 确认密码验证
    if (password !== confirmPassword) {
        document.getElementById('register-confirm-password').classList.add('is-invalid');
        showMessage('两次密码不一致', 'danger');
        return;
    } else {
        document.getElementById('register-confirm-password').classList.remove('is-invalid');
    }

    showMessage('注册成功！正在开发中...');
});

// 实时验证
document.getElementById('register-confirm-password').addEventListener('input', function () {
    const password = document.getElementById('register-password').value;
    const confirmPassword = this.value;

    if (password !== confirmPassword) {
        this.classList.add('is-invalid');
    } else {
        this.classList.remove('is-invalid');
    }
});

